<template>
    <div class="alphabet-wrapper">
        <div class="alphabet"
        v-for="item in alphabet"
        :key="item"
        @click="changeLetter"
        @touchstart="start"
        @touchend="end"
        @touchmove="move"
        :ref="el => elements[item] = el">
            {{item}}
        </div>
    </div>
</template>
<script>
import { onUpdated, ref } from 'vue'
export default {
  name: 'CityAlphabet',
  props: {
    alphabet: Array
  },
  setup(props, context){
    //console.log(props.alphabet)
    let status = false
    let startY = 0
    let timer = null
    let elements = ref({})
    onUpdated(()=>{
      startY = elements.value['A'].offsetTop
    })
    function changeLetter(e){
      let letter = e.target.innerText
      context.emit('change', letter)
    }
    function start () {
      status = true
    }
    function end () {
      status = false
    }
    function move (e) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      } else {
        timer = setTimeout(() => {
          if (status) {
            let y = e.targetTouches[0].clientY
            let index = Math.floor((y - startY - 79) / 20)
            let letter = props.alphabet[index]
            if (letter) {
              context.emit('change', letter)
            }
          }
        }, 8)
      }
    }
    return { changeLetter, elements, start, end, move }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
.alphabet-wrapper
    width .4rem
    position fixed
    top 1.58rem
    right 0
    bottom 0
    display flex
    flex-direction column
    justify-content center
    .alphabet
        line-height .4rem
        text-align center
        color $bgColor
</style>
